'use strict';
import React, {Component, PropTypes} from 'react';
import ReactDOM, {render} from 'react-dom';

import {connect} from 'react-redux';

import {bindActionCreators} from 'redux';

import {R_header} from './common/index'

import {scanDevice} from '../action/index'
import {Toast} from '../Http'

import {HttpService} from '../utils'
// import kaoqin24 from '../img/login/kaoqin24.png'
// import kaoqin1356 from '../img/login/kaoqin1356.png'
//import imgSao from '../img/sao.png'

class AddDevice extends React.Component {

    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };
    constructor(props) {
        super(props);
        this.state = {
            val: '',
            bg: 'app-little-pink-radius-button'
        }
    }

    change(e) {
        let val = e.target.value;
        this.setState({val: val, bg: 'app-pink-radius-button'})
    }
    next(val, e) {
        e.preventDefault();
        if (!val) {
            Toast.toast('请输入设备号');
            return;
        }
        if (val.length < 10) {
            Toast.toast('设备号至少10位');
            return;
        } else if (val.length > 10 && val.length < 14) {
            Toast.toast('请输入正确的设备号');
            return;
        }
        // if (this.props.params.islogin == 'change') {
        //
        //     return;
        // }
        this.props.scanDevice(this, val, this.props.params.islogin)
    }
    

    render() {
        const {bg} = this.state;
        const {type} = this.props.params;
        return (
            <div style={{
                background: '#eee',
                minHeight: '100%',
                paddingTop: '4rem'
            }}>
                <R_header title="输入设备号" left="1"/>
                <div className="container">
                    <form onSubmit={this.next.bind(this, this.state.val)} name="form">
                        <div className="col-xs-12 app-white-input margin-one">
                            <input type="number" placeholder='请输入设备IMEI号' style={{
                                width: '100%',
                                paddingRight: '4rem'
                            }} onChange={this.change.bind(this)} ref='kaoqin'/>
                        </div>

                        <label style={{
                            display: 'block'
                        }}>
                            <div className={"col-xs-12 text-center " + bg}>
                                下一步
                            </div>
                            <button type="submit" style={{
                                display: 'none'
                            }}></button>
                        </label>
                    </form>

                </div>
                <p className='devtips'>注：智能学生证设备请输入前14位数字IMEI号码，最后一位为核验码；考勤卡设备请输入10位考勤卡号</p>

            </div>
        )
    }
}

const mapStateToProps = state => {
    return {};
};
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        scanDevice: scanDevice
    }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(AddDevice);
